import React, { useState, useEffect } from 'react'
import { Button, Input, Toast, hooks, Swiper, Image, Calendar, Cell, Flex, Loading } from 'react-vant'
import { Exchange, Arrow } from '@react-vant/icons';
import { useNavigate } from "react-router-dom"
import axios from "../../uilst/axios"
type Props = {}

const Home = (props: Props) => {
  const [state, updateState]: any = hooks.useSetState({ text: '北京' })
  const [state1, updateState1]: any = hooks.useSetState({ text: '上海' })
  const getstate = localStorage.getItem("address")
  const getstate1 = localStorage.getItem("addresstow")
  const [list, setlist] = useState([])
  useEffect(() => {
    axios.get("/homelist").then(res => {
      setlist(res.data)
    })
    updateState({ text: getstate })
    updateState1({ text: getstate1 })
  }, [])


  const navigate = useNavigate()
  const images = [
    { img: require("../../imgs/1_03.jpg") },
    { img: require("../../imgs/1_03.jpg") },
    { img: require("../../imgs/1_03.jpg") },
  ];
  const switchs = () => {

    updateState(state1);
    updateState1(state);
    console.log(state1,state);
    
    const getstate = localStorage.setItem("address",state1.text)
    const getstate1 = localStorage.setItem("addresstow",state.text)
  }
  // 清除历史
  const cliers = () => {
    const getstate = localStorage.removeItem("address")
    const getstate1 = localStorage.removeItem("addresstow")
    updateState({ text: getstate })
    updateState1({ text: getstate1 })

  }
  // 点击查询
  const querys = () => {
    if (state.text === state1.text) {
      Toast('出发地和目的地不可以一样哦')
    } else {
      navigate("/trainquery")
    }
  }
  return (
    <div className='home'>
      <header>
        <div className="headercon"> </div>
        <h3>火车票预订</h3>
        <p>便捷购票，服务您的每一次出行</p>

      </header>
      <div className="area">
        <div className="areacon">
          <div className="area1">
            <Input
              value={getstate === '' ? "" : state.text}
              onChange={text => updateState({ text })}
              placeholder='请输入文本'
              onClick={() => navigate('/address')}
            />
            <span onClick={switchs}><Exchange /></span>
            <Input
              value={getstate1 === '' ? "" : state1.text}
              onChange={text => updateState1({ text })}
              placeholder='请输入文本'
              onClick={() => navigate('/addresstow')}
            />
          </div>
          <div className="area2">
            <Calendar>
              {(val: any, actions) => (
                <Cell
                  isLink
                  title='6月18日明天'
                  value={val ? val.toLocaleDateString() : '请选择日期'}
                  onClick={() => actions.open()}
                />
              )}
            </Calendar>
          </div>
          <div className="area3">
            <Button type='primary' color='#FF7A00' block round onClick={querys}>
              查询
            </Button>
            <div className="area3con">
              <span>{state.text}-{state1.text}</span><span onClick={cliers}>清除历史</span>

            </div>
          </div>
        </div>

      </div>
      <main>
        <div className="swiper">
          <div className="demo-swiper">
            <Swiper>
              {images.map((item, index) => (
                <Swiper.Item key={index}>
                  <Image lazyload src={item.img} />
                </Swiper.Item>
              ))}
            </Swiper>
          </div>
        </div>
        <div className="Travel">
          <div className="Travelheader">
            <h3><span>出行快讯</span><span className='span2'>更多&nbsp;<Arrow color='#D6D6D6' /></span></h3>

          </div>
          <div className="Travelcon">
            {
              list.map((item: any, index) => {
                return <div key={index} className="Travelconcon">
                  <p className='Serial'>{index + 1}</p>
                  <div className='raveltitle'>
                    <h4>{item.title}</h4>
                    <p><span>{item.name}</span><span>{item.data}</span></p>
                  </div>
                  <Flex.Item span={8}>
                    <Image
                      loadingIcon={<Loading type='spinner' />}
                      width='100%'
                      height='24vw'
                      src={item.img}
                    />
                  </Flex.Item>

                </div>
              })
            }
          </div>
        </div>
      </main>
    </div>
  )
}

export default Home